<template>
    <!-- 我的处方 -->
    <div class="my-prescription layout-media-box">
        <div class="l-panel prescripton-box">
            <div class="prescripton-tab-box">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane    
                        v-for="(item, index) in tabList"  
                        :key="index" 
                        :label="item.label" 
                        :name="item.id"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="query-box">
                <el-date-picker
                    size="small"
                    v-model="queryTime"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-button size="small" type="primary" round @click="query()">查询</el-button>
            </div>
            <div class="prescriptionList-box">
                <prescription-history
                    :readState="readState"
                    :queryTime="queryTime"
                    ref="prescriptionList"
                >
                </prescription-history>
            </div>
        </div>
    </div>
</template>
<script>
import prescriptionHistory from '../user/components/prescriptionhistory/prescription-history'
  export default {
    components: {
        prescriptionHistory
    },
    data() {
      return {
        readState: '',
        activeName: '0',
        queryTime: [],
        tabList: [
            {
                label: '全部',
                id: '0',
            },{
                label: '待查看',
                id: '1',
            },{
                label: '已查看',
                id: '2',
            }
        ]
      };
    },
    methods: {
        query() {
            this.$nextTick(() => {
                this.$refs.prescriptionList.getPatientPrescriptionList()
            })
        },
        handleClick(tab, event) {
            if (this.activeName === "0") {
                this.readState = '';
            } else if (this.activeName === "1") {
                this.readState = '0'; 
            } else if (this.activeName === "2") {
                this.readState = '1';
            }
            
            this.query();
        }
    }
  };
</script>
<style lang="scss" scoped>
    .my-prescription {
        .l-panel {
            width: 100%;
        }
    }
    .prescripton-tab-box {
        padding: 8px 15px;
        /deep/ .el-tabs__header {
            width: 55%;
        }
    }
    .prescripton-box {
        position: relative;
        .query-box {
            // width: 45%;
            position: absolute;
            top: 15px;
            right: 15px;
            padding-left: 50px;
            /deep/ .el-range-separator {
                width: 20px;
            }
            /deep/ .el-button--small {
                margin-left:20px;
            }
        }
    }
    .prescriptionList-box {
        margin: 15px;
    }
</style>